import React from 'react';
import { convertX, convertY, convertSize } from '../utils/responsive';
import '../css/temp-use-card.css';

interface TempUseCardProps {
  /** 组件定位 - 水平坐标 */
  x: number;
  /** 组件定位 - 垂直坐标 */
  y: number;
  /** 组件宽度 */
  width: number;
  /** 组件高度 */
  height: number | 'auto';
  /** 是否使用最大高度限制 */
  useMaxHeight?: boolean;
  /** 子组件内容 */
  children: React.ReactNode;
  /** 额外样式类名 */
  className?: string;
  /** 组件z-index层级 */
  zIndex?: number;
}

/**
 * 通用卡片容器组件
 * 统一管理组件的大小、定位和基础布局
 * 使用响应式转换函数确保多设备适配
 */
const TempUseCard: React.FC<TempUseCardProps> = ({
  x,
  y,
  width,
  height,
  useMaxHeight = false,
  children,
  className = '',
  zIndex = 10
}) => {
  return (
    <div 
      className={`temp-use-card ${className}`}
      style={{
        position: 'absolute',
        left: convertX(x),
        top: convertY(y),
        width: convertSize(width),
        height: height === 'auto' ? 'auto' : convertSize(height, false),
        maxHeight: useMaxHeight ? 'calc(100vh - 120px)' : 'none',
        zIndex
      }}
    >
      {children}
    </div>
  );
};

export default TempUseCard;